<template>
	<w-layout showNavbar navTitle="规则" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #navRight>
			<view @click="popup.showRule = true" class="">
				说明
			</view>
		</template>
		<template #default>
			<view class="container">
				<view class="public-btn-11 px-40 fr-ac mt-40" style="height: 90rpx;">
					<view class="op-50 w-33 t-l">
						等级
					</view>
					<view class="op-50 flex-1 t-c">
						数量
					</view>
					<view class="op-50 w-33 t-r">
						概率
					</view>
				</view>
				
				<view class="mt-40 u-border-bottom px-40 pb-30 fr-ac" style="border-color: var(--gray-line) !important;" v-for="(item,index) in state.list" :key="index">
					<view class="color w-33 t-l">
						{{item.title}}
					</view>
					<view class="color flex-1 t-c">
						{{item.num}}
					</view>
					<view class="color w-33 t-r">
						{{item.pro}}%
					</view>
				</view>
				
				
				<up-popup :show="popup.showRule" @close="popup.showRule = false" mode="center" :safeAreaInsetBottom="false" bgColor="transparent">
					<view class="public-popup-2 px-50 py-20 fc" style="width: 670rpx;min-height: 760rpx;position: relative;">
						<view class="fs-36">
							规则说明
						</view>
						<view class="mt-80" style="max-height: 400rpx;overflow: scroll;line-height: 1.8;">
							<view class="" style="line-height: 1.8;">
								<up-parse :content="state.rule"></up-parse>
							</view>
						</view>
						<view @click="popup.showRule = false;" class="public-btn-3 transition py-25 t-c mt-auto mb-60">
							<view class="text-color-b fs-32">
								确认
							</view>
						</view>
					</view>
				</up-popup>
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		cardextractor_goodsdetail,
		get_parse
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
		if(options.type){
			get_parseApi(options.type)
		}
		if(options.id){
			state.goods_id = options.id
			get_cardextractor_goodsdetail()
		}
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	const page = reactive({
		scrollTop:0
	})
	
	const state = reactive({
		list:[],
		page:1,
		limit:15,
		last_limit:15,
		
		keyword:'',
		rule:'',
	})
	function initData(){
		state.list = []
		state.page = 1
		state.last_limit = 15
	}
	
	async function get_cardextractor_goodsdetail(){
		const res = await cardextractor_goodsdetail({
			goods_id: state.goods_id
		})
		state.list = res.guize.content1
	}
	
	
	
	const popup = reactive({
		showRule:false,
	})
	
	async function get_parseApi(type){
		const res = await get_parse({
			type
		})
		state.rule = res
	}
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 30rpx;
		
	}
</style>